<template>
    <el-table :data="leaveRecords" style="width: 100%">
      <el-table-column prop="id" label="请假记录ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="realName" label="真实姓名"></el-table-column>
      <el-table-column prop="startTime" label="请假开始时间"></el-table-column>
      <el-table-column prop="endTime" label="请假结束时间"></el-table-column>
      <el-table-column prop="reason" label="请假原因"></el-table-column>
      <el-table-column label="请假状态">
        <template #default="{ row }">
          <span v-if="row.status === '批准'">批准</span>
          <span v-if="row.status === '未批准'">未批准</span>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  
  const leaveRecords = ref([
    // 请假记录数据
    { id: 1, username: '张三', realName: '张三', startTime: '2023-01-01', endTime: '2023-01-02', reason: '生病', status: '批准' },
    { id: 2, username: '李四', realName: '李四', startTime: '2023-01-03', endTime: '2023-01-04', reason: '家庭紧急情况', status: '未批准' },
    // ...更多请假记录数据
  ]);
  </script>
  
  <style>
  /* 自定义样式 */
  .leave-list {
    margin-top: 20px;
  }
  </style>
  